<template>
    <div style="height: 80%;width: 80%;margin: 120px 120px 120px 120px; ">
        <el-button
                type="primary"
                style="height: 100%;width: 100%;font-size: 50px "
                @click.native.prevent="handleLogin">
            {{ $t('login.logIn') }}
        </el-button>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from 'vue-property-decorator'
    import {Route} from 'vue-router'
    import {Dictionary} from 'vue-router/types/router'
    import {setToken} from "@/core/utils/storage";

    @Component({
        name: 'Login',
        components: {}
    })
    export default class Login extends Vue {
        private redirect?: string;
        private otherQuery: Dictionary<string> = {};

        mounted() {
        }

        handleLogin() {
            setToken("admin-token");
            this.$router.push({
                path: this.redirect || '/',
                query: this.otherQuery
            });
        }

        @Watch('$route', {immediate: true})
        private onRouteChange(route: Route) {
            const query = route.query as Dictionary<string>;
            if (query) {
                this.redirect = query.redirect;
                this.otherQuery = this.getOtherQuery(query);
            }
        }


        private getOtherQuery(query: Dictionary<string>) {
            return Object.keys(query).reduce((acc, cur) => {
                if (cur !== 'redirect') {
                    acc[cur] = query[cur]
                }
                return acc
            }, {} as Dictionary<string>)
        }

    }
</script>

<style lang="scss" scoped>
    .login-container {

    }
</style>
